<template>
  <div class="in-master-print" ref="print">
    <div class="print-mid">
      <div class="mid-l">
        <h3>{{title}}</h3>
        <h2>{{printData.workTypeTran}}</h2>
        <p><label>单据编码：</label>
          <span>{{printData.omCode}}</span>
        </p>
        <p><label>单据日期：</label>
          <span>{{printData.invoiceDate}}</span>
        </p>
        <p><label>单据状态：</label>
          <span>{{printData.invoiceStatus|getInvoice}}</span>
        </p>
        <p><label>审核日期：</label>
          <span>{{printData.checkDate}}</span>
        </p>
      </div>
      <div class="mid-m">
      <p><label>销售部门：</label>
        <span>{{printData.workDept}}</span>
      </p>
      <p>
        <label>销售员：</label>
        <span>{{printData.workStaff}}</span>
      </p>
      <p>
        <label>客户名称：</label>
        <span>{{printData.customer}}</span>
      </p>
     <p>
       <label>销售类型：</label>
       <span>{{printData.saleType}}</span>
     </p>
    </div>
    <div class="mid-m">
      <p><label>合同号：</label>
        <span>{{printData.contractNo}}</span>
      </p>
      <p>
        <label>付款条件：</label>
        <span>{{printData.paymentTeam}}</span>
      </p>
      <p>
        <label>交付日期：</label>
        <span>{{printData.deliverDate}}</span>
      </p>
     <p>
       <label>交期状态：</label>
       <span>{{printData.deliverStatus|getDeliverSstatus}}</span>
     </p>
    </div>
    <div class="mid-m">
       <p><label>收货人：</label>
         <span>{{printData.contact}}</span>
       </p>
       <p>
         <label>电话：</label>
         <span>{{printData.mobile}}</span>
       </p>
       <p>
         <label>地址：</label>
         <span>{{printData.addr}}</span>
       </p>
       <p >
         <label>备注：</label>
         <span>{{printData.remarks}}</span>
       </p>
     </div>

      <div class="mid-r">
         <vue-qr  :logoScale="20" :text="qrCodeValue" :margin="0" :dotScale="1"></vue-qr>
      </div>
    </div>
    <table  cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>序号</th>
          <th>物料编码</th>
          <th style="width: 150px;">物料名称</th>
          <th>主计量</th>
           <th>税率</th>
          <th >数量</th>
          <th>单价</th>
          <th >金额</th>
          <th>质量要求</th>
          <th v-if="invFeature=='AC'">文件清单</th>
          <th v-if="invFeature=='null'">交付件数</th>
          <th>包装要求</th>
           <th  v-if="invFeature=='AC'">包装参数</th>
          <th  v-if="invFeature=='null'">备注</th>
        </tr>
      </thead>
      <tbody v-if="printData.omOrderSalveList.length>0">
        <tr v-for="(item,id) in printData.omOrderSalveList" :key="id">
          <td  class="inv-id">{{item.id}}</td>
          <td  class="inv-code">{{item.invCode}}</td>
          <td style="width: 150px;">{{item.invName}}{{item.invAttribute}}</td>
          <td  class="inv-unit">{{item.unitName}}<span v-if="invFeature=='AC'">{{item.densityCode}}</span></td>
          <td  class="inv-tax">{{item.tax}}%</td>
          <td class="inv-quantity">{{item.quantity}}</td>
          <td  class="inv-price">{{item.price}}</td>
          <td class="inv-amount">{{item.amount}}</td>
          <td class="bill-remarks">
              <div v-html="item.qualityRemarks" style="white-space: pre-line"></div>
          </td>
          <td v-if="invFeature=='AC'" style="width: 100px;">
            <div class="doc" v-for="(doc,i) in item.documents" :key="i" style="width: 60px;">
              {{doc}}
            </div>
          </td>
             <td v-if="invFeature=='null'" style="width: 100px;">{{item.piece}}{{item.pieceType}}</td>
          <td class="bill-remarks">
              <div v-html="item.pkgRemarks" style="white-space: pre-line"></div>
          </td>
           <td   v-if="invFeature=='AC'">
           <div class="pkg-box">
             <div>
               <label>包装类型</label>
               <p>{{item.pkgType}}</p>
             </div>
            <div>
              <label>交付件数</label>
              <p><span>{{item.minNumber}}{{item.minType}}</span><span>{{item.piece}}{{item.pieceType}}</span></p>
            </div>
            <div>
              <label>备注</label>
              <p class="remarks" v-html="item.remarks"></p>
            </div>
           </div>
           </td>
          <td  class="inv-remarks" v-if="invFeature=='null'"> <div v-html="item.remarks"></div></td>
        </tr>
      </tbody>
    </table>
    <div class="print-bot">
      <div class="bot-l">
        <label>制单人：</label>
        <span>{{printData.userOper}}</span>
      </div>
      <div class="bot-m">
        <label>审核人：</label>
        <span>{{printData.userCheck}}</span>
      </div>
      <div class="bot-r">
        <label>打印日期：</label>
        <span>{{printData.printTime}}</span>
      </div>
    </div>
  </div>

</template>

<script>
  import vueQr from 'vue-qr'
  export default {
    data() {
      return {
      }
    },
    props: {
      // 打印数据
      printData: {
        type: Object,
        default () {
          return {}
        }
      },

      // 打印标题
      title: {
        type: String,
        default () {
          return ""
        }
      },

      // 二维码内容
       qrCodeValue:{
         type: String,
         default () {
           return ""
         }
       },
      invFeature:{
        type: String,
        default () {
          return "0"
        }
      }
    },

    components: {
        vueQr
    },
    filters: {
     getInvoice(status) {
       switch (status) {
         case '0':
           return "开立"
           break;
         case '1':
           return "审核"
           break;
         case '2':
           return "退回"
           break;
         default:
           return "无"
       }
     },
    getDeliverSstatus(status) {
       switch (status) {
         case '0':
           return "预计"
           break;
         case '1':
           return "确认"
           break;

         default:
           return ""
       }
     }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .pkg-box{
    width: 100px;
    div{
      margin-bottom: 10px;
    }
    p{
      margin: 0;
    }
    .remarks{
      word-wrap: break-word;
      width: 100px;
    }
  }
</style>
